<html>
	<head>
		<title>Edit Profile | Jobseeker</title>		
		<link rel="stylesheet" href="css/metro-bootstrap.css">			
		<script src="js/jquery/jquery.min.js"></script>		
		<script src="js/jquery/jquery.widget.min.js"></script>		
		<script src="js/metro/metro-input-control.js"></script>
		<script src="js/metro/metro-hint.js"></script>
		<script src="js/metro/metro-tab-control.js"></script>
		<link rel="stylesheet" href="css/costum.css">	

	<script>
		//FONT RESIZING
		$(document).ready(function(){
		  // Reset Font Size
		  var originalFontSize = $('html').css('font-size');
			$(".resetFont").click(function(){
			$('html').css('font-size', originalFontSize);
		  });
		  // Increase Font Size
		  $(".increaseFont").click(function(){
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*1.2;
			$('html').css('font-size', newFontSize);
			return false;
		  });
		  // Decrease Font Size
		  $(".decreaseFont").click(function(){
			var currentFontSize = $('html').css('font-size');
			var currentFontSizeNum = parseFloat(currentFontSize, 10);
			var newFontSize = currentFontSizeNum*0.8;
			$('html').css('font-size', newFontSize);
			return false;
		  });
		});

  </script>		
	</head>
	
	<body>
		<div class="metro">
			<div class="grid container fluid">
			<!-- START HEADER -->
        <div class="row">
            <div class="span8 bg-white">
                <div class="padding20">
					<nav class="horizontal-menu">
							<li><a href="http://priawadi.blogspot.com">Home</a></li>
							<li><a href="http://priawadi.blogspot.com">FAQ</a></li>
							<li><a href="http://priawadi.blogspot.com">Feedback</a></li>
							<li><a href="http://priawadi.blogspot.com">Contact Us</a></li>
							<h2><strong>ELECTRONIC LABOR EXCHANGE</strong><h2>
							<img src="images\logoMoha.png" class="span6">
					</nav>						        
                </div>
            </div>
			
            <div class="span4">
                <div class="row">
				<button class="success span4 offset3">EMPLOYER</button>
				<button>JOBSEEKER</button><br/>
				<!-- 
                       <div class="tab-control" data-role="tab-control">
							<ul class="tabs">
								<li class="active"><a href="#_page_1">EMPLOYER</a></li>
								<li><a href="#_page_2">JOBSEEKER</a></li>
							</ul>						 
						</div>
				-->		
				<small>Welcome <strong><a href="">Jobseeker88</a></strong></small>,
				<small><button class="button warning mini"><span class="icon-user-2"></span>Login</button></small>
				<small><button class="button warning mini"><span class="icon-user-3"></span>Register</button></small>
				<br/>
				<small class="offset6"><a href="">Forgot Password</a></small>
				<img src="images\logoBrunei.png" class="span4 offset7"><br/><br/>
				</div>
				<!-- Text Resizing -->
				<div class="row">
				<div id="changeFont">
					<strong><a href="#" class="increaseFont">A+</a></strong>
					<strong><a href="#" class="resetFont">A</a></strong>
					<strong><a href="#" class="decreaseFont">A-</a></strong>
				</div>
				</div>
								
				
					<div class="span4"></div>
						
                        
			

			
						<div class="search">
							<form>
								<div class="input-control text">
								<a href=""><img src="images\search.png"></a>
									<input type="text" class="span10" placeholder="Search...">
								</div>
							</form>
						</div>
               
				
            </div>			
		</div>
			
			<!-- Menu -->
			<div class="row">
				<ul id="menu">
					<li id="job"><a href=""></a></li>
					<li id="training"><a href=""></a></li>
					<li id="events"><a href=""></a></li>
					<li id="gallery"><a href=""></a></li>
					<li id="chat"><a href=""></a></li>
				</ul>
			</div><br/>
			
			<!-- END HEADER-->
			
			
			<legend>User Profile</legend>
				<center>
				<div class="image-container shadow">
					<img src="./images/jeki_chan.jpg">
					<div class="overlay-fluid">
						<a href="" class="file">Change Photo</a>
					</div>
				</div>
				</center><br/>
			<!-- START TAB -->
			<div class="row">
			
				<div class="tab-control" data-role="tab-control">
					<ul class="tabs">
						<li class="active"><a href="#_page_1">Your Profile</a></li>
						<li><a href="#_page_2">Education</a></li>
						<li><a href="#_page_3">Company</a></li>
						<!--<li class="place-right"><a href="#_page_4"><i class="icon-cog"></i></a></li>-->
					</ul>
				 
					<div class="frames">
						<div class="frame" id="_page_1">
						<!-- START TAB 1-->
							<table class="table striped">
							<!-- LOGIN NAME-->			
							<tr>
								<td class="span4 text-right" style="vertical-align:middle"><strong>Login Name:</strong></td>
								<td>
									<div class="input-control text nbm" data-role="input-control" data-hint-position="right" data-hint="Login Name|This is your login name">
										<input type="text" value="">
									</div>
								</td>
							</tr>
							<!-- FIRST NAME-->
							<tr>
								<td class="span4 text-right" style="vertical-align:middle"><strong>First Name:</strong></td>
								<td>
									<div class="input-control text nbm" data-role="input-control" data-hint-position="right" data-hint="First Name|This is your first name">
										<input type="password">
									</div>
								</td>
							</tr>
							<!-- LAST NAME-->
							<tr>
								<td class="span4 text-right" style="vertical-align:middle"><strong>Last Name:</strong></td>
								<td>
									<div class="input-control text nbm" data-role="input-control" data-hint-position="right" data-hint="Last Name|This is your last name">
										<input type="text" value="">
									</div>
								</td>
							</tr>
							<!-- EMAIL -->
							<tr>
								<td class="span4 text-right" style="vertical-align:middle"><strong>Email:</strong></td>
								<td>
									<div class="input-control text nbm" data-role="input-control" data-hint-position="right" data-hint="Email|This is your email">
										<input type="email">
									</div>
								</td>
							</tr>
							<!-- DATE OF BIRTH-->
							<tr>
								<td class="span4 text-right" style="vertical-align:middle"><strong>Date of Birth:</strong></td>
								<td>
									<div class="input-control text nbm" data-role="input-control" data-hint-position="right" data-hint="Date of Birth|This is your date of birth">
										<input type="text">
									</div>
								</td>
							</tr>
							<!-- IC NUMBER -->
							<tr>
								<td class="span4 text-right" style="vertical-align:middle"><strong>IC Number:</strong></td>
								<td>
									<div class="input-control text nbm" data-role="input-control" data-hint-position="right" data-hint="IC Number|This is your IC number">
										<input type="text" value="">
									</div>
								</td>
							</tr>
							<!-- Gender -->
							<tr>
								<td class="span4 text-right" style="vertical-align:middle"><strong>Gender:</strong></td>
								<td>
									<div class="input-control radio margin10" data-role="input-control">
										<label>
											Male
											<input type="radio" name="r1" checked />
											<span class="check"></span>
										</label>
									</div>
									<div class="input-control radio margin10" data-role="input-control">
										<label>
											Female
											<input type="radio" name="r1" />
											<span class="check"></span>
										</label>
									</div>
								</td>
							</tr>
							<tr>
								<td class="span4 text-right" style="vertical-align:middle"></td>
								<td>
									<button class="info">Enter</button>
								</td>
							</tr>
							</table>
						<!-- END TAB 1-->
						</div>
						<div class="frame" id="_page_2">...</div>
						<div class="frame" id="_page_3">...</div>
					</div>
				</div>
			<!-- END TAB -->

			</div>
			</div>
		</div>	
	</body>	
</html>